<!--
 * @description: 新增分销客户
 * @Author: latiao
 * @Date: 2021-11-09 15:39:06
 * @LastEditors: latiao
 * @LastEditTime: 2022-03-14 17:36:45
-->
<template>
  <view class="customer" >
    <view  v-for="(item,index) in customersList" :key="index" class="customer__item">
      <view class="customer__item__upper">
       <image class="customer__item__upper--photo" :src="item.avatarUrl"/>
       
       <view class="information">
        <view class="information__name">
        {{item.nikeName}}
        </view>
        <view class="information__layout">
          <view class="information__layout--time"> 
          注册时间：{{item.createTime}}
          </view>
          <!-- <view class="information__layout--people">
          推广0人
          </view> -->
        </view>
       </view>
      </view>
      <view class="customer__item__statistics">
      <view class="customer__item__statistics--consumption">消费{{item.singleUserAmount==null?0:item.singleUserAmount}}元</view>
      <view class="customer__item__statistics--order">{{item.userOrderCount}}个订单</view>
      </view>
    </view>
     <u-divider contentPosition="center" >没有更多了~</u-divider>
  </view>
</template>

<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
   import {
    distributionDetailGet,
  } from "@/api/modules/distribution";
  @Component({
    components: {
    }
  })
export default class DistributionCustomers extends Vue {
   current:number=1;
   customersList:{}={}
    created() {
      this.distributionDetailGet(); 
        
    }
    distributionDetailGet(){
      distributionDetailGet({current:this.current}).then(res=>{
        this.customersList={...this.customersList,...res.list}
      })
    }
    onReachBottom() {
      this.setData({
        current: ++this.current
      });
      this.distributionDetailGet();
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixins/mixins.scss";

@include b(customer){
  // padding-top: 50rpx;
  font-size: 30rpx;
  @include e(item){
    background: #fff;
    width: 750rpx;
    height: 275rpx;
    padding: 30rpx 30rpx 41rpx;
    margin-top: 10rpx;
  }
}

@include b(customer__item){
  @include e(upper){
    border-bottom: 1px solid #EEEDEE;
    display: flex;
    padding-bottom: 35rpx;
    @include m(photo){
      width: 101rpx;
      height: 101rpx;
      margin-right: 15rpx;
    }
  }
}

@include b(information){
  width: 83%;
  @include e(name){

  }
  @include e(layout){
    color: #5C5C5C;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24rpx;
    @include m(time){
      font-size: 28rpx;
    }
  }
}

@include b(customer__item){
  @include e(statistics){
   display: flex;
   justify-content: space-between;
   margin-top: 38rpx;
  }
}
</style>